import React from 'react'

import {GradeCon,Pai,MyP,GradeList} from '../../components/grade'
import { Progress} from 'antd-mobile';
import A from 'assets/images/my/touxiang1@2x.png' 

const Grade =function(props){
   
    return (
        <>
            <GradeCon>
                <div className='logoDiv'>
                    <img src={A} alt=""/>
                </div>
                <div className='progress'>
                    <Pai>lv1</Pai>
                    <div className="show-info">
                        <div className="progress"><Progress percent={props.percent} position="normal" /></div>
                        <div aria-hidden="true" onClick={props.incGrade}>{props.percent}%</div>  
                    </div>
                    <em>0/100</em>
                </div>
                <MyP>等级越高您接受的任务赏金会更高</MyP>
            </GradeCon>
            <GradeList>
                {
                    props.list.map((value,index)=>{
                      return <>
                            <li className='topic'>恭喜您，等级提升到</li> 
                                {
                                    value.map((value,index)=>{
                                return <>
                                    <li key={index+100}>{value}</li></>
                
                                })}
                            </>
                    })
                }
                 {/* <h2>等级提升记录</h2> */}
                
                
            </GradeList>
        </>
    )
}

export default Grade

